import { Component } from '@angular/core';
import { ServesService } from './utl/serves.service';
import * as $ from 'jquery';
import yijing from '../assets/filename';
import { MatSnackBar } from '@angular/material/snack-bar';

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('openClose', [
      // ...
      // state(
      //   'open',
      //   style({
      //     height: '200px',
      //     opacity: 1,
      //     backgroundColor: 'yellow',
      //   })
      // ),
      state(
        'closed',
        style({
          width: '1px',
          height: '1px',
          opacity: 0.0,
          backgroundColor: 'green',
        })
      ),
      transition('open => closed', [animate('1s')]),
      transition('closed => open', [animate('0.5s')]),
    ]),
    trigger('flyInOut', [
      state('in', style({ transform: 'translateX(0)' })),
      // transition('void => *', [
      //   style({ transform: 'translateX(-100%)' }),
      //   animate(100),
      // ]),
      transition('* => void', [
        animate(
          500,
          style({
            transform: 'translateX(100%)',
            width: '1px',
            height: '1px',
            opacity: 0.0,
            backgroundColor: 'green',
          })
        ),
      ]),
    ]),
  ],
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar) {}

  remind = '请点击某个圆圈';

  // 控制canvas 的css的z-index
  showcanvas_index = 'showcanvas_index_false';

  // 易经的原文
  yijiangwen = '';
  // 表示第几卦
  dozens_of = 1;
  // 是否显示结果
  Isresult = false;
  // Isresult = true;
  image_yijing = [
    '000000',
    '111111',
    '101110',
    '011101',
    '101000',
    '000101',
    '111101',
    '101111',
    '001000',
    '000100',
    '111000',
    '000111',
    '000010',
    '010000',
    '111011',
    '110111',
    '100110',
    '011001',
    '111100',
    '001111',
    '010110',
    '011010',
    '011111',
    '111110',
    '000110',
    '011000',
    '011110',
    '100001',
    '101101',
    '010010',
    '100011',
    '110001',
    '000011',
    '110000',
    '010111',
    '111010',
    '001010',
    '010100',
    '101011',
    '110101',
    '011100',
    '001110',
    '100000',
    '000001',
    '100111',
    '111001',
    '100101',
    '101001',
    '100010',
    '010001',
    '110110',
    '011011',
    '001011',
    '110100',
    '110010',
    '010011',
    '001001',
    '100100',
    '001101',
    '101100',
    '001100',
    '110011',
    '101010',
    '010101',
  ];

  button_local: any[] = [];
  ishuxian: boolean = true;
  is_orientation: any[] = [];
  title = 'zanp';
  kuaizi: number[] = [];
  _number = 1;

  // 第二次拿出来的筷子
  removekuaizi: number[] = [];
  takeoutKuaizi: number[] = [];

  // 最后得到的数据
  in_the_end: number[] = [];
  in_the_end_result: number[] = [0,1,1,0,0,1];

  isin_the_end = false;

  isButtonOne = false;
  isButtonOneShow = true;
  leftChopsticksButton = false;
  isButtonTwoShow = false;

  leftChopsticks: number[] = [];
  rightChopsticks: number[] = [];

  index_bian: any = null;

  removeOne(value: number) {
    console.log(value);
    this.kuaizi.splice(value, 1);
    console.log(this.kuaizi);
    this.isButtonOne = true;
    // 改变canvas的z-index
    // this.showcanvas_index = 'showcanvas_index_false';
    this.remind = '请点击鼠标右键在下面小圆上画一条直线（将小圆分成两部分）';
  }
  twohalf() {
    this.index_bian = this.index_bian + 1;
    console.log('分两半');
    this.leftChopsticksButton = false;
    this.isButtonOneShow = false;
    this.isButtonTwoShow = true;

    // 清空画布
    function resize_canvas() {
      // @ts-ignore
      let canvas = document.getElementById('myCanvas');
      // @ts-ignore
      // @ts-ignore
      canvas.width = window.innerWidth;
    }

    resize_canvas();
    this.showcanvas_index = 'showcanvas_index_false';
    this.ishuxian = true;
    this.remind = '请点击右侧的某个圆圈';
  }

  removeleftOneOrjisuan(value: number) {
    this.showcanvas_index = 'showcanvas_index_false';
    console.log('this.index_bian', this.index_bian);
    this.kuaizi.splice(value, 1);
    this.removekuaizi = this.removekuaizi.concat(this.leftChopsticks[value]);
    this.leftChopsticks.splice(value, 1);
    this.leftChopsticksButton = true;
    let leftYI = this.leftChopsticks.length % 4;
    let rightYI = this.rightChopsticks.length % 4;
    if (leftYI == 0) {
      leftYI = 4;
    } else {
    }
    if (rightYI == 0) {
      rightYI = 4;
    } else {
    }
    setTimeout(() => {
      this.isButtonTwoShow = false;
      let newleftxiabiao = this.leftChopsticks.length - leftYI;
      let newrightxiabiao = this.rightChopsticks.length - rightYI;
      console.log(newleftxiabiao, newrightxiabiao);
      let _a = this.leftChopsticks.splice(newleftxiabiao, leftYI);
      let _b = this.rightChopsticks.splice(newrightxiabiao, rightYI);
      console.log(this.leftChopsticks, this.rightChopsticks);
      this.kuaizi = this.rightChopsticks.concat(this.leftChopsticks);
      this.takeoutKuaizi = this.takeoutKuaizi.concat(_a.concat(_b));
      console.log('removekuaizi', this.removekuaizi, this.kuaizi.length);
      // this.isButtonTwoShow = false;
      this.isButtonOneShow = true;
      console.log(this.isButtonTwoShow);
      if (this.index_bian == 3) {
        console.log(this.index_bian);
        this.index_bian = 0;
        // alert('第' + this._number + '变得到' + this.kuaizi.length / 4);
        this.snackBar.open('以计算完第' + this._number + '爻', '关闭', {
          duration: 1000,
          horizontalPosition: 'center',
          verticalPosition: 'top',
        });
        this.in_the_end.push(this.kuaizi.length / 4);
        if (this.in_the_end.length == 6) {
          this.isButtonOneShow = false;
          this.isButtonTwoShow = false;
          this.isin_the_end = true;
          this.ishuxian = false;
          // 易经原文赋值
          this.in_the_end_result = ServesService.checkoutResult(
            this.in_the_end
          );
          this.remind = '已算出最终结果';
          let result = this.in_the_end_result.join('');
          var index = this.image_yijing.indexOf(result);
          this.yijiangwen = yijing[index];
          this.dozens_of = index + 1;
          this.Isresult = true;
          // this.xia_yijing = yijing[index].two;
        } else {
          this._number++;
          // this.isButtonOne = false;
          this.kuaizi = this.kuaizi
            .concat(this.takeoutKuaizi)
            .concat(this.removekuaizi);
          this.takeoutKuaizi = [];
          this.removekuaizi = [];
          console.log(this.kuaizi);
          ServesService.number_of_components(this.kuaizi);
        }
      } else {
      }
    }, 1000);
    this.remind = '请点击鼠标右键在下面小圆上画一条直线（将小圆分成两部分）';
  }

  fourItems(value: number) {}
  ngOnInit() {
    this.yijiangwen = yijing[5];

    function resize_canvas() {
      console.log('123');
      // @ts-ignore
      let canvas = document.getElementById('myCanvas');
      // @ts-ignore
      if (canvas.width < window.innerWidth) {
        // @ts-ignore
        canvas.width = window.innerWidth;
      }
    }
    resize_canvas();

    var arr8 = new Array(51).keys();
    this.kuaizi = Array.from(arr8);
    this.kuaizi.splice(0, 1);
    console.log(this.kuaizi);
    // ServesService.number_of_components(this.kuaizi);

    var c = document.getElementById('myCanvas'); //初始化

    // @ts-ignore
    const huahxian = (x, y, x1, y1) => {
      // @ts-ignore
      var ctx = c.getContext('2d');
      var point1 = {
        left: x,
        top: y,
      }; //第一个点
      var point2 = {
        left: x1,
        top: y1,
      };
      //第二个点
      ctx.beginPath();
      ctx.moveTo(point1.left, point1.top); //起始位置
      ctx.lineTo(point2.left, point2.top); //停止位置
      ctx.stroke();
      this.ishuxian = false;
    };

    var dot = new Array();
    // @ts-ignore
    var zuobiaolist = [];
    // @ts-ignore

    // @ts-ignore

    // @ts-ignore
    document.onmousedown = (a) => {
      //若div存在，则删除
      if (document.getElementById('line_div')) {
        // @ts-ignore
        var clearDiv = document.getElementById('line_div');
        // @ts-ignore
        clearDiv.parentNode.removeChild(clearDiv);
      }
      //按下时创建一个事件
      // if (!a) a = window.event;
      //获取x轴、y轴坐标
      zuobiaolist[0] = a.clientX;
      zuobiaolist[1] = a.clientY - 130;
      // @ts-ignore
      console.log(zuobiaolist);
    };

    document.onmouseup = (a) => {
      console.log('松开事件');
      if (document.getElementById('line_div')) {
        var clearDiv = document.getElementById('line_div');
        // @ts-ignore
        clearDiv.parentNode.removeChild(clearDiv);
      }
      zuobiaolist[2] = a.clientX;
      zuobiaolist[3] = a.clientY - 130;
      // @ts-ignore
      let _number_xy =
        // @ts-ignore
        Math.abs(zuobiaolist[0] - zuobiaolist[2]) +
        // @ts-ignore
        Math.abs(zuobiaolist[1] - zuobiaolist[3]);
      console.log(zuobiaolist.length, this.ishuxian, _number_xy);
      if (
        zuobiaolist.length == 4 &&
        this.ishuxian == true &&
        _number_xy > 300
      ) {
        console.log(
          // @ts-ignore
          zuobiaolist[0] + zuobiaolist[2] + (zuobiaolist[1] + zuobiaolist[3])
        );
        huahxian(
          // @ts-ignore
          zuobiaolist[0],
          // @ts-ignore
          zuobiaolist[1],
          // @ts-ignore
          zuobiaolist[2],
          // @ts-ignore
          zuobiaolist[3]
        );

        setTimeout(() => {
          // @ts-ignore
          this.isStraightLine(zuobiaolist);
        }, 300);
      } else {
        console.log('你已经画了一条线');
      }
      document.onmousemove = null;
    };
    // 获取按钮坐标位置
    var _div = document.getElementById('div1');
    console.log(_div);
  }

  shanchu() {}
  // 判断点是否在直线上
  // local 为两个点的坐标 下标1，2 为一个点，3，4 为一个点
  isStraightLine(local: any) {
    // 查找每个按钮的位置
    find_xy('div1', this);
    // 查找每个button 的坐标
    function find_xy(_div: string, thi: any) {
      let that = thi;
      // @ts-ignore
      var _div = document.getElementById(_div);
      // @ts-ignore
      var _a = _div.querySelectorAll('button');

      // @ts-ignore
      _a.forEach((element) => {
        console.log(element.getBoundingClientRect());
        let onehang = {
          x: element.getBoundingClientRect().x + 30,
          y: element.getBoundingClientRect().y + 30,
        };

        that.button_local.push(onehang);
      });
      console.log('按钮的位置', that.button_local);
    }

    // 求直线方程
    let A = local[1] - local[3];
    let B = local[2] - local[0];
    let C = local[0] * local[3] - local[1] * local[2];
    this.leftChopsticks = [];
    this.rightChopsticks = [];
    this.button_local.forEach((element, index) => {
      if (element.x > -(B * element.y + C) / A) {
        this.is_orientation.push('right');

        if (this.kuaizi[index]) {
          this.rightChopsticks.push(this.kuaizi[index]);
          // this.kuaizi.splice(index, 1);
        } else {
          console.log('右边没有');
        }

        // console.log('在右边');
      } else {
        this.is_orientation.push('left');
        // console.log('在左边');
        if (this.kuaizi[index]) {
          this.leftChopsticks.push(this.kuaizi[index]);
          // this.kuaizi.splice(index, 1);
        } else {
          console.log('左边没有');
        }
      }
    });

    if (this.leftChopsticks.length <= 5 || this.rightChopsticks.length <= 5) {
      this.is_orientation = [];
      this.rightChopsticks = [];
      this.leftChopsticks = [];
      // 清空画布
      function resize_canvas() {
        // @ts-ignore
        let canvas = document.getElementById('myCanvas');
        // @ts-ignore
        // @ts-ignore
        canvas.width = window.innerWidth;
      }
      resize_canvas();
      this.snackBar.open('两边的球都必须超过五个，请重新划线', '关闭', {
        duration: 2000,
        horizontalPosition: 'center',
        verticalPosition: 'top',
      });
      this.ishuxian = true;
    } else {
      this.kuaizi = [];
      this.twohalf();
    }
  }

  // 组件初始化之后计算每个“筷子”的位置
  ngAfterViewInit() {}
}
